@import "./variables.scss";

html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: #f8f8f8;
}

.van-cell-group--inset {
  margin: 0 !important;
}

// IE10版本以上的
.scroll_content {
  -ms-scroll-chaining: chained;
  -ms-overflow-style: none;
  -ms-content-zooming: zoom;
  -ms-scroll-rails: none;
  -ms-content-zoom-limit-min: 100%;
  -ms-content-zoom-limit-max: 500%;
  -ms-scroll-snap-type: proximity;
  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
  -ms-overflow-style: none;
  overflow: auto;
}

::-webkit-scrollbar {
  display: none;
}

/* 在电脑上显示时，根据屏幕宽度调整根元素字体大小 */
@media screen and (min-width: 768px) {
  html,
  body {
    font-size: 100px !important;
    width: 750px !important;
    margin: 0 auto !important;
    .van-popup--bottom {
      bottom: 0;
      width: 750px;
      left: 50%;
      margin-left: -375px;
    }
    .van-dialog {
      width: 400px;
    }
  }
  .home {
    border: 1px solid #eee;
    height: 98vh !important;
    overflow-y: scroll;
  }

  .container {
    border: 1px solid #eee;
    overflow-y: scroll;
  }
  .evection {
    border: 1px solid #eee;
    overflow-y: scroll;
    height: 100vh;
    .van-empty__description {
      margin-top: 30px;
    }
  }

  .addTrade-component,
  .addTroops-component {
    border: 1px solid #eee;
    .van-empty__description {
      margin-top: 30px;
    }
  }

  .center-w {
    margin-top: 0 !important;
  }
}

.app-container {
  background-color: $app-background-color;

  .app-header {
  }

  .app-body {
    height: calc(100vh - var(--van-nav-bar-height) - var(--van-tabbar-height));
    overflow: auto;
  }

  .app-body-noNavBar {
    height: calc(100vh - var(--van-tabbar-height));
    overflow: auto;
  }

  .app-body-noTabBar {
    height: calc(100vh - var(--van-nav-bar-height));
    overflow: auto;
  }

  .app-body-noNavBar-noTabBar {
    height: calc(100vh);
    overflow: auto;
  }

  .app-footer {
  }
}
